<template>
	<view :class="pageType == 4 ? 'shouye-order-fan':'shouye-order'" @touchmove.stop.prevent>
		<view  class="order-list-hd"  >
			<view class="order-item" :class="tipIndex == 0 ? 'order-item-active':''">
				<text @click="chooseTip(0)">热门推荐</text>
				<view class="order-line"  :class="tipIndex == 0 ? 'active':''"></view>
			</view> 
			<!-- <view class="order-item" v-if='pageType==1' :class="tipIndex == 5 ? 'order-item-active':''">
				<text  @click="chooseTip(5)">好评优先</text>
				<view class="order-line"  :class="tipIndex == 5 ? 'active':''"></view>
			</view> -->
			<view class="order-item" v-if="pageType==2"  @click="zhpaiXu">
				<view style="display: flex;flex-direction: row;justify-content: center;">
					<text >{{zhpaixu}}</text>
					<view class="sanjiao" ></view>
				</view>
				<!-- <view class="order-line" style="width: 80%;" :class="tipIndex == 2 ? 'active':''"></view> -->
				<view class="zhpaixu-box" v-if="openZHPX" @touchmove.stop.prevent="moveHandle">
					<view style="width: 682upx;height: 80upx;display: flex;flex-direction: row;justify-content: space-between;">
						<text @click="zhpaixu ='综合排序'" :style="{'color':(zhpaixu == '综合排序'?'rgba(0,134,255,1.00) !important':'')}">综合排序</text>
						<image src="/static/duihao.png" v-if="zhpaixu == '综合排序'" mode=""></image>
					</view>
					<view style="width: 682upx;height: 80upx;display: flex;flex-direction: row;justify-content: space-between;">
						<text @click="zhpaixu ='好评优先'" :style="{'color':(zhpaixu == '好评优先'?'rgba(0,134,255,1.00) !important':'')}">好评优先</text>
						<image src="/static/duihao.png" v-if="zhpaixu == '好评优先'" mode=""></image>
					</view>
					<view style="width: 682upx;height: 80upx;display: flex;flex-direction: row;justify-content: space-between;">
						<text @click="zhpaixu ='最新发布'" :style="{'color':(zhpaixu == '最新发布'?'rgba(0,134,255,1.00) !important':'')}">最新发布</text>
						<image src="/static/duihao.png" v-if="zhpaixu == '最新发布'" mode=""></image>
					</view>
				</view>
			</view>
			<view class="order-item"  v-if="pageType!=2&&pageType!=3" :class="levelNum != 0? 'order-item-active':''">
				<view style="display: flex;flex-direction: row;justify-content: center;">
					<text class="level" @click="chooseLevel" :class="pageType >3 ?'level-t':''" >{{dj}}</text>
					<view class="sanjiao" v-if="pageType<4" @click="chooseLevel"></view>
				</view>
				<view class="order-line" :class="levelNum != 0 ? 'active':''"></view>
			</view>
			<view class="order-item" :class="tipIndex == 1 ? 'order-item-active':''">
				<text v-if='pageType!=4' @click="chooseTip(1)">距离最近</text>
				<text v-if="pageType==4" @click="chooseTip(1)">行程天数</text>
				<view class="order-line"  :class="tipIndex == 1 ? 'active':''"></view>
			</view>
			<view class="order-item" v-if="pageType==3"  @click="zhpaiXu">
				<view style="display: flex;flex-direction: row;justify-content: center;">
					<text >{{zhpaixu}}</text>
					<view class="sanjiao" ></view>
				</view>
				<!-- <view class="order-line" style="width: 80%;" :class="tipIndex == 2 ? 'active':''"></view> -->
				<view class="zhpaixu-box" v-if="openZHPX" @touchmove.stop.prevent="moveHandle">
					<view style="width: 682upx;height: 80upx;display: flex;flex-direction: row;justify-content: space-between;">
						<text @click="zhpaixu ='综合排序'" :style="{'color':(zhpaixu == '综合排序'?'rgba(0,134,255,1.00) !important':'')}">综合排序</text>
						<image src="/static/duihao.png" v-if="zhpaixu == '综合排序'" mode=""></image>
					</view>
					<view style="width: 682upx;height: 80upx;display: flex;flex-direction: row;justify-content: space-between;">
						<text @click="zhpaixu ='好评优先'" :style="{'color':(zhpaixu == '好评优先'?'rgba(0,134,255,1.00) !important':'')}">好评优先</text>
						<image src="/static/duihao.png" v-if="zhpaixu == '好评优先'" mode=""></image>
					</view>
					<view style="width: 682upx;height: 80upx;display: flex;flex-direction: row;justify-content: space-between;">
						<text @click="zhpaixu ='人均从低到高'" :style="{'color':(zhpaixu == '人均从低到高'?'rgba(0,134,255,1.00) !important':'')}">人均从低到高</text>
						<image src="/static/duihao.png" v-if="zhpaixu == '人均从低到高'" mode=""></image>
					</view>
					<view style="width: 682upx;height: 80upx;display: flex;flex-direction: row;justify-content: space-between;">
						<text @click="zhpaixu ='人均从高到低'" :style="{'color':(zhpaixu == '人均从高到低'?'rgba(0,134,255,1.00) !important':'')}">人均从高到低</text>
						<image src="/static/duihao.png" v-if="zhpaixu == '人均从高到低'" mode=""></image>
					</view>
				</view>
			</view>
			<view class="order-item"  v-if="pageType!=3"   @click="paiXu">
				<view style="display: flex;flex-direction: row;justify-content: center;">
					<text >{{paixu}}</text>
					<view class="sanjiao" ></view>
				</view>
				<!-- <view class="order-line" style="width: 80%;" :class="tipIndex == 2 ? 'active':''"></view> -->
				<view class="paixu-box" v-if="openPX" @touchmove.stop.prevent="moveHandle">
					<text @click="paixu ='价格升序'" >价格升序</text>
					<text @click="paixu ='价格降序'">价格降序</text>
				</view>
			</view>
			<view class="order-item" v-if="pageType==3" @click="shaiXuan" :class="screenIndex != 0? 'order-item-active':''">
				<view style="display: flex;flex-direction: row;justify-content: center;">
					<text class="level"  :class="pageType >3 ?'level-t':''" >筛选</text>
					<view class="sanjiao" v-if="pageType<4" ></view>
				</view>
				<view class="order-line" :class="screenIndex != 0 ? 'active':''"></view>
			</view>
		</view>
		<FoodScreen v-if='showFS'></FoodScreen>
		<view v-if="showMask" class="mask" @touchmove.stop.prevent="moveHandle"></view>
		<view class="ft-box" v-if='showFT'  @touchmove.stop.prevent="moveHandle">
			<view class="ft-item" v-for="(item,index) in foodData" :key='index'
			:class="index == levelNum ? 'ft-item-ac':''" @click="chooseLv(index)">
				{{item.level}}
			</view>
		</view>
		<view class="level-area" v-if="openLevel"  @touchmove.stop.prevent="moveHandle">
			<view>
			</view>
			<view class="level-btn-l" v-if="!firstLevel" @click="levelBtn">
				<img src="../static/jiantou.png" > 
			</view>
			<view class="level-list">
				<scroll-view class="scroll-view_H"  scroll-x="true" @scroll="scroll" :scroll-left="scrollLeft">
				    <view  class="scroll-view-item_H " :class="index == levelNum ? 'scroll-view-item_H-ac':''" @click="chooseLv(index)" v-for="(item,index) in listData" :key='index'>{{item.level}}</view>
				</scroll-view>
			</view>
			<!-- <view class="level-btn-r" v-if="firstLevel" @click="levelBtn"> -->
			<view class="level-btn-r" @click="goRight" v-if="firstLevel">
				<img src="/static/jiantou.png" > 
			</view>
		</view>
	</view>
</template>

<script>
	import FoodScreen from '@/components/FoodScreen.vue'
	export default{
		name:'shouyeOrder',
		props:["pageType"],
		data(){
			return{
				scrollLeft: 0,
				old: {
					scrollLeft: 150
				},
				showFS:false,
				showMask:false,
				showFT:false,
				openLevel:false,
				openPX:false,
				openZHPX:false,
				firstLevel:true,
				paixu:'价格升序',
				zhpaixu:'综合排序',
				statusBarHeight:global.statusBarHeight + 'px',
				levelNum:0,
				tipIndex : 0,
				screenIndex:0,
				listData:[],
				dj:'',
				levelData:[
					{level:'不限级别',id:6},{level:'AAAAA',id:5},{level:'AAAA',id:4},
					{level:'AAA',id:3},{level:'AA',id:2},{level:'A',id:1}
				],
				starData:[
					{level:'不限级别',id:6},{level:'五星级',id:5},{level:'四星级',id:4},
					{level:'三星级',id:3},{level:'二星级',id:2},{level:'一星级',id:1}
				],
				recreData:[
					{level:'不限类别',id:6},{level:'唱歌',id:5},{level:'跳舞',id:4},
					{level:'篮球',id:3},{level:'RAP',id:2},
				],
				foodData:[
					{level:'不限类别',id:10},{level:'小吃快餐',id:6},{level:'烧烤烤肉',id:5},{level:'面包西点',id:4},
					{level:'火锅',id:3},{level:'饮品店',id:2},{level:'日韩料理',id:1},
					{level:'川湘菜',id:7},{level:'特色海鲜',id:8},{level:'其它美食',id:9},
					
				],
				huodongData:[
					{level:'不限类别',id:6},{level:'主题乐园',id:5},{level:'文物古迹',id:4},
					{level:'自然风景',id:3},{level:'体育旅游',id:2},{level:'主题乐园',id:1}
				],
				crewData:[
					{level:'不限类别',id:6},{level:'主题乐园',id:5},{level:'文物古迹',id:4},
					{level:'自然风景',id:3},{level:'体育旅游',id:2},{level:'主题乐园',id:1}
				]
			}
		},
		methods:{
			moveHandle(){
				
			},
			chooseTip(index){
				this.tipIndex = index
				this.openPX = false
				this.showFS = false
				this.openZHPX = false
				this.showFT = false
				this.openLevel = false
				if(this.pageType==3||this.pageType==2){
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.closeMask();
						//#endif	
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.closeMask();
						//#endif
				}
				
			},
			chooseLevel(){
				if(this.pageType!=3||this.pageType!=2){
					this.openLevel = !this.openLevel
				}else{
					this.showFT=!this.showFT
					if(this.showFT){
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.showMasker();
						//#endif	
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.showMasker();
						//#endif
					}else{
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.closeMask();
						//#endif	
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.closeMask();
						//#endif
					}
				}
				this.openPX = false
				this.openZHPX = false
				this.showFS = false
			},
			chooseLv(index){
				this.levelNum = index
				this.openPX = false
				this.openZHPX = false
				this.openLevel= false
				if(this.pageType==3||this.pageType==2){
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.closeMask();
						//#endif	
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.closeMask();
						//#endif
				}
			},
			levelBtn(){
				this.firstLevel = !this.firstLevel
			},
			
			change(e) {
				this.current = e.detail.current;
			},
			openMask(index){
				if(this.openIndex != index){
					this.openIndex = index
				}else{
					this.openIndex = null
				}
			},
			shaiXuan(){
				this.openLevel = false
				this.showFT = false
				this.openPX = false
				this.openZHPX =false
				this.showFS=!this.showFS
				if(this.showFS){
					//#ifdef APP-PLUS|| MP-WEIXIN
					this.$parent.showMasker();
					//#endif	
					//#ifndef APP-PLUS|| MP-WEIXIN
					this.$parent.$parent.showMasker();
					//#endif
				}else{
					//#ifdef APP-PLUS|| MP-WEIXIN
					this.$parent.closeMask();
					//#endif	
					//#ifndef APP-PLUS|| MP-WEIXIN
					this.$parent.$parent.closeMask();
					//#endif
				}
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			goRight: function() {
				this.scrollLeft = this.old.scrollLeft
				this.$nextTick(function() {
					this.scrollLeft = 200
				});
			},
			paiXu(){
				this.openLevel = false
				this.showFT = false
				this.openZHPX = false
				this.openPX = !this.openPX
				if(this.pageType==3||this.pageType==2){
					if(this.openPX){
						
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.showMasker();
						//#endif	
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.showMasker();
						//#endif
					}else{
						
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.closeMask();
						//#endif	
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.closeMask();
						//#endif
					}
				}
				this.showFS= false
					
				
			},
			zhpaiXu(){
				this.openLevel = false
				this.showFT = false
				this.openPX = false
				this.openZHPX = !this.openZHPX
				if(this.pageType==3||this.pageType==2){
					if(this.openZHPX){
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.showMasker();
						//#endif	
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.showMasker();
						//#endif
					}else{
						
						//#ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.closeMask();
						//#endif	
						//#ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.closeMask();
						//#endif
					}
				}
				this.showFS= false
					
				
			},
			closeFT(){
				this.showFS = false
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closeMask();
				//#endif	
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closeMask();
				//#endif
			}
			
		},
			
		
		created() {
			switch(this.pageType){
				case 0:
					this.listData = this.levelData
					this.dj = '级别'
					break;
				case 1:
					this.listData = this.starData
					this.dj = '星级'
					break;
				case 2:
					this.listData = this.recreData
					this.dj = '类别'
					break;
				case 3:
					this.listData = this.foodData
					this.dj = '类别'
					break;
				case 4:
					this.listData = this.crewData
					this.dj = '目的地'
					break;	
				case 5:
					this.listData = this.huodongData
					this.dj = '景区类型'
					break;	
			}
			
		},
		components: {
			FoodScreen
		},
	}
</script>

<style scoped>
	.mask{
		width: 750upx;
		height: 100vh;
		background: rgba(0,0,0,0.5);
		position: absolute;
		z-index: 20;
	}
	.ft-box{
		width: 750upx;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		position: absolute;
		background: #FFFFFF;
		z-index: 35;
	}
	.paixu-box{
		width: 154upx;
		height: 122upx;
		display: flex;
		margin-top: 20upx;
		position: absolute;
		z-index: 10;
		background: #FFFFFF;
		border-radius: 10upx;
		flex-direction: column;
		box-shadow: 0px 2px 10px 8px rgba(85,147,255,0.29);
	}
	.paixu-box text{
		color: rgba(102,102,102,1.00) !important;
		width: 100%;
		height: 30upx;
		display: block;
		margin-top: 20upx;
		font-weight: 400 !important;
		font-size: 22upx !important;
		text-align: center;
		line-height: 30upx;
	}
	.zhpaixu-box{
		width: 750upx;
		height: auto;
		display: flex;
		margin-top: 8upx;
		left: 0;
		
		position: absolute;
		z-index: 10;
		background: #FFFFFF;
		border-radius: 10upx;
		flex-direction: column;
		text-align: right;
		/* box-shadow: 0px 2px 10px 8px rgba(85,147,255,0.29); */
	}
	.zhpaixu-box image{
		width: 19upx;
		height: 19upx;
		min-height: 14px;
		min-width: 14px;
		margin-top: 20upx;
	}
	.zhpaixu-box text{
		color: rgba(102,102,102,1.00) !important;
		width: 200upx;
		padding-left: 34upx;
		height: 30upx;
		display: block;
		margin-top: 20upx;
		font-weight: 400 !important;
		font-size: 22upx !important;
		text-align: left !important;
		line-height: 30upx;
	}
	.ft-item{
		padding: 4upx 24upx;
		margin: 10upx 20upx;
		background: #F3F3F3;
		border-radius: 20upx;
		font-size: 24upx;
	}
	.ft-item-ac{
		padding: 4upx 24upx;
		margin: 10upx 20upx;
		background: #ADD9FF;
		color: #FFFFFF;
		border-radius: 20upx;
		font-size: 24upx;
	}
	.shouye-order{
		width: 100%;
		height: auto;
		border-top: 15upx #F6F6F6 solid;
		padding-top: 30upx;
		margin-top: 50upx;
	}
	.shouye-order-fan{
		width: 100%;
		height: auto;
		/* border-bottom: 15upx #F6F6F6 solid; */
		padding-top: 30upx;
		margin-top: 50upx;
	}
	.order-list{
		width: 80%;
		margin-left: 10%;
		display: flex;
		flex-direction: row;
	}
	.order-list-hd{
		width: 100%;
		margin-left: 0;
		display: flex;
		flex-direction: row;
	}
	.order-item{
		width: 25%;
		height: 45upx;
	}
	.order-item text{
		/* width: 100%; */
		display: block;
		color: #0075EE;
		line-height: 30upx;
		font-size: 28upx;
		text-align: center;
	}
	.order-item-active text{
		font-size: 30upx;
		line-height: 30upx;
		font-weight: bold;
	}
	.order-item .level{
		text-align: right;
	}
	.order-item .level-t{
		text-align: center;
	}
	.sanjiao{
		width: 0upx;
		height: 0upx;
		/* background: #55A0FF; */
		float: right;
		/* margin-right: 25%; */
		border: 10upx solid transparent;
		border-top-color: #55A0FF;
		margin-top: 10upx;
		
	}
	.order-line{
		width: 120upx;
		height: 3upx;
		margin-top:8upx;
		background: #FFFFFF;
		margin-left: auto;
		margin-right: auto;
		
	}
	.active{
		background: -webkit-linear-gradient(left, #8EC6FF,#6592F7);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #8EC6FF,#6592F7);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #8EC6FF,#6592F7);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #8EC6FF,#6592F7);
		/* 标准的语法 */
	}
	.level-area{
		width: 100%;
		height: 50upx;
		margin-top: 10upx;
	}
	.level-list{
		width: 90%;
		height: 60upx;
		 overflow-y: auto;
		display: flex;
		flex-direction: row;
		float: left;
	}
	.level-item{
		width: 33.33%;
		text-align: center;
		
	}
	.level-item text{
		font-size: 25upx;
		color: #afa8a8;
	}
	.active-span text{
		color: #0075EE;
		font-weight: bold;
		font-size: 28upx;
	}
	.level-btn-l{
		width: 8%;
		float: left;
		height: 100%;
		text-align: center;
		border-right: 2px rgb(230,225,225,0.28) inset ;
		/* background: #2C405A; */
	}
	.level-btn-l img{
		width: 32upx;
		height: 32upx;
		margin-top: 10upx;
		transform: rotate(180deg);
	}
	.level-btn-r{
		width: 8%;
		float: right;
		height: 100%;
		text-align: center;
		border-left: 2px rgb(230,225,225,0.28) inset ;
		/* background: #2C405A; */
	}
	.level-btn-r img{
		width: 32upx;
		height: 32upx;
		margin-top: 10upx;
	}
	
	.scroll-view_H {
		/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
		white-space: nowrap;
		height: 80upx;
		width: 100%;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 150upx;
		height: 50upx;
		color: #999999;
		text-align: center;
		font-size: 30upx;
		margin-top: 0;
		margin: 0  1% 2% 1%;
	}
	.scroll-view-item_H-ac{
		color: #55A0FF;
		font-size: 32upx;
	}
	.scroll-view-item_H view{
		box-sizing: border-box;
	}

</style>
